<template>
  <div class="map-container">
    <div ref="mapElementRef" class="map-element"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch, defineProps } from 'vue'
import 'ol/ol.css'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import { Map, View, Feature } from 'ol'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import Point from 'ol/geom/Point'
import { Style, Stroke, Icon, Fill, Text } from 'ol/style'
import * as control from 'ol/control'
import * as interaction from 'ol/interaction'
import appleIcon from '@/assets/bit-screen/schedule-mge/airport.png' // 确保你有一个 apple.png 的图标文件
import { useRoute } from 'vue-router'
import {getPortInfo} from '@/api/home'
const route = useRoute()
const airportName = ref('')
const airportId = ref(0)
const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  getMapStatus: {
    type: Number,
    default: 0
  },
  getRouteNet: {
    type: Boolean,
    default: false
  }
})

const mapElementRef = ref<HTMLDivElement | null>(null)
const data = reactive({
  map: null as Map | null,
  view: null as View | null,
  vecMap: null as TileLayer<XYZ> | null,
  imgMap: null as TileLayer<XYZ> | null,
  imgRoadNet: null as TileLayer<XYZ> | null,
  vecRoadNet: null as TileLayer<XYZ> | null,
  iconLayer: null as VectorLayer | null
})

const initMap = () => {
  if (!mapElementRef.value) return
  if (!data.map) {
    mapElementRef.value.setAttribute('id', props.id)

    data.imgMap = new TileLayer({
      source: new XYZ({
        crossOrigin: 'anonymous',
        url: 'https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=f634525a82da65f715d168d7ba1899c0'
      })
    })

    data.vecMap = new TileLayer({
      source: new XYZ({
        url: 'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=f634525a82da65f715d168d7ba1899c0'
      })
    })

    data.imgRoadNet = new TileLayer({
      source: new XYZ({
        url: 'https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=f634525a82da65f715d168d7ba1899c0',
        crossOrigin: 'anonymous'
      })
    })

    data.vecRoadNet = new TileLayer({
      source: new XYZ({
        url: 'https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=f634525a82da65f715d168d7ba1899c0',
        crossOrigin: 'anonymous'
      })
    })

    data.view = new View({
      projection: 'EPSG:4326',
      // center: [112.6151714, 28.2840082],
      center: [118.76657756249328, 31.82936654813672],
      zoom: 15,
      minZoom: 10,
      maxZoom: 18
    })

    data.map = new Map({
      target: mapElementRef.value,
      view: data.view,
      layers: [data.imgMap, data.vecMap, data.imgRoadNet, data.vecRoadNet],
      controls: control.defaults({
        attribution: false,
        rotate: false,
        zoom: false
      }),
      interactions: interaction.defaults({
        doubleClickZoom: false
      })
    })
  }

  updateLayerVisibility()
}

const updateLayerVisibility = () => {
  const isImageMap = props.getMapStatus === 0
  data.imgMap?.setVisible(isImageMap)
  data.vecMap?.setVisible(!isImageMap)
  data.imgRoadNet?.setVisible(isImageMap && props.getRouteNet)
  data.vecRoadNet?.setVisible(!isImageMap && props.getRouteNet)
}

const addAppleIcon = (coordinates: [number, number]) => {
  const iconFeature = new Feature({
    geometry: new Point(coordinates)
  })

  const iconStyle = new Style({
    image: new Icon({
      anchor: [0.5, 1],
      src: appleIcon
    }),
    text: new Text({
      text: airportName.value, // 设置文字
      offsetY: 14, // 确保文字不会遮挡图标
      font: 'normal 14px SourceHanSansCN-Bold',

      // 文字颜色
      fill: new Fill({
        color: '#fff'
      })
    })
  })

  iconFeature.setStyle(iconStyle)

  const vectorSource = new VectorSource({
    features: [iconFeature]
  })

  data.iconLayer = new VectorLayer({
    source: vectorSource
  })

  data.map?.addLayer(data.iconLayer)
}
const getAirportInfo=async()=>{
    const res= await getPortInfo({airportId:airportId.value})
    addAppleIcon([Number(res.data.longitude) ,Number(res.data.latitude) ])
    data.view.targetCenter_=[Number(res.data.longitude) ,Number(res.data.latitude) ]
    console.log(data.view.targetCenter_)

}

onMounted(() => {
  airportName.value = route.query.name
  airportId.value= route.query.id
  // 获取当前机场信息
  initMap()
  getAirportInfo()
})

watch(
  () => [props.getMapStatus, props.getRouteNet],
  () => {
    updateLayerVisibility()
  }
)
</script>

<style lang="less" scoped>
.map-container {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .map-element {
    width: 100%;
    height: 100%;
  }
}
</style>
